<template>
  <div class="view">
    <el-row :gutter="20" style="height: 100%;margin-left:0px;margin-right:0px;">
      <el-col :span="8" style="height: 100%;padding-left:0px;padding-right:0px;">
        <div class="grid-content bg-purple" style="height: 100%;">
          <el-card class="box-card" style="height: 100%;">
            <div slot="header" class="clearfix">
              <span>{{ $t("admin.title1") }}</span>
            </div>
            <div class="text">
              <ul>
                <li class="item color0">
                  {{ $t("admin.username") }}
                  <div class="pull-right">{{ form.userName }}</div>
                </li>
                <li class="item color0">
                  {{ $t("admin.phone") }}
                  <div class="pull-right">{{ form.phones }}</div>
                </li>
                <li class="item color0">
                  {{ $t("admin.email") }}
                  <div class="pull-right">{{ form.email }}</div>
                </li>
                <li class="item color0">
                  {{ $t("admin.role") }}
                  <div class="pull-right">{{ form.roleName }}</div>
                </li>
                <li class="item color0">
                  {{ $t("admin.welltype") }}
                  <div class="pull-right">{{ form.wellTypeName }}</div>
                </li>
                <li class="item color0">
                  {{ $t("admin.usergroup") }}
                  <div class="pull-right">{{ form.userGroupName }}</div>
                </li>
                <li class="item color0">
                  {{ $t("admin.company") }}
                  <div class="pull-right">{{ form.companyName }}</div>
                </li>
                <li class="item color0">
                  {{ $t("admin.createtime") }}
                  <div class="pull-right">{{ form.createTime }}</div>
                </li>
              </ul>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16" style="height:100%;padding-right: 0px;">
        <div class="grid-content bg-purple" style="height:100%">
          <el-card class="box-card" style="height:100%">
            <div slot="header" class="clearfix">
              <span>{{ $t("admin.title2") }}</span>
              <el-button style="float: right;padding: 10px 0px;width: 100px;margin-top: -6px;" @click="updateData" type="primary">{{
                  $t("public.save")
                }}</el-button>
            </div>
            <el-form
              label-width="100px"
              ref="form"
              :model="form"
              class="userform"
            >
              <el-form-item :label="$t('admin.username')" prop="userName" 
              :rules="[
                  {
                    required: true,
                    message: '请输入用户名称',
                    trigger: 'blur',
                  }]">
                <el-input v-model="form.userName"></el-input>
              </el-form-item>
              <el-form-item :label="$t('admin.phone')" prop="phones">
                <el-input v-model="form.phones" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item
                prop="email"
                :label="$t('admin.email')"
                :rules="[
                  {
                    type: 'email',
                    message: '请输入正确的邮箱地址',
                    trigger: ['blur', 'change'],
                  },
                ]"
              >
                <el-input v-model="form.email"></el-input>
              </el-form-item>

              <el-form-item :label="$t('admin.gender')">
                <el-radio-group v-model="form.gender">
                  <el-radio :label="true">{{ $t("public.body") }}</el-radio>
                  <el-radio :label="false">{{ $t("public.girl") }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        userName: "",
        phones: "",
        email: "",
        companyName: "",
        roleName: "",
        createTime: "",
        gender: "",
      },
    };
  },
  computed: {},
  mounted() {
    this.getUser();
  },
  methods: {
    //获取
    async getUser() {
      try {
        let params = {
          usid: JSON.parse(this.$store.state.userInfo).uid,
        };
        let res = await this.$api.management.getUser(params);
        res.data[0].createTime = this.dateFunction(res.data[0].createTime);
        this.form = res.data[0];
      } catch (e) {
        console.log(e);
      }
    },
    //修改
    updateData() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let params = {
            userName: this.form.userName,
            phoneNumber: this.form.phones,
            email: this.form.email,
            sex: this.form.gender,
            createUser: JSON.parse(this.$store.state.userInfo).uid,
            userId: String(JSON.parse(this.$store.state.userInfo).uid),
          };
          let res = await this.$api.management.editUser(params);
          if (res.code == 200) {
            this.$message({
              message: this.$t("public.editsuccess"),
              type: "success",
            });
            this.$refs["form"].resetFields(); //清空表单
            this.getUser(); //刷新数据
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        }
      });
    },

    //封装 处理带T的时间
    dateFunction(time) {
      var zoneDate = new Date(time).toJSON();
      var date = new Date(+new Date(zoneDate) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
      return date;
    },
  },
};
</script>
<style lang="less">
.grid-content {
  border-radius: 4px;
  min-height: 36px;

  .box-card {
    border: none;
  }

  .clearfix {
    font-size: 16px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    padding: 11px 0;
    .pull-right {
      float: right;
    }
  }
}
</style>